<template>
	<view class="containerSC">
		<!-- <view class="station"></view> -->
		<navbar id="navbar" ref="navbar" backColor="#000" :config="config"></navbar>
		<!-- <view class="titleView"   :style="'height:' + sticky + 'px;'">同城商家</view> -->
		<view class="search-top">
			<!-- :style="{'top': sticky + 'px'}" -->

			<view class="city-text" @click="addressShowFun">
				<image :src="imgUrl+'/city/Local.png'"></image>
				<view>{{cityName}}</view>
			</view>
			<view class="searchBox">
			
				<input @click="searchClick" placeholder="搜索商品"
					:style="'background-image: url('+imgUrl+'/city/huiSearchSmall.png' + ')'"
					placeholder-class="input-placeholder" />
			</view>
		</view>
		<!-- <view style="height: 150rpx;"></view> -->
		<view class="banner" v-if="bannerList.length > 0">
			<!-- <image src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/shop/banner.png" mode="aspectFill"></image> -->
			<u-swiper :list="bannerList" name="cover" height="307" :mode="bannerList.length>1?'round':'none'"
				bg-color="transparent" @click="bannerClick"></u-swiper>
		</view>
		<view class="menu" v-if="typeList.length > 0 || iconList.length > 0">
			<swiper class="swiper" :indicator-dots="true" :autoplay="false" :current="current"
				:style="{'height':((iconList[current].length)>5?'350rpx':'175rpx')}" @change="swiperChange">
				<swiper-item class="swiper-item" v-for="(el, k) in iconList">
					<view class="item" v-for="(v,i) in el" :key="i" @click="goShop(v)">
						<view class="img">
							<image :src="v.icon" mode="widthFix"></image>
						</view>
						<text>{{v.name}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="con-box">
			<u-section title="附近门店" font-size="31" :bold="true" color="#333333" :show-line="false" sub-title="查看全部"
				sub-color="#999999" @click="goShop()">
			</u-section>
			<view class="items">
				<view class="item" v-for="(v, index) in listData" :key="index" @click="goDetails(v)">
					<view class="shop-img">
						<image :src="v.logo" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="title" style="line-height: 36rpx;">{{v.shop_name}}</view>
						<view class="score-box" style="margin-top: 8rpx;">
							<view class="score">
								<rate :value="Math.round(v.average)"></rate>
							</view>
							<text class="score-text">{{v.average.toFixed(2)}}分</text>
							<!-- 距离： -->
							<!-- <text class="ju">{{Math.round(v.distance/1000*100)/100}}KM</text> -->
						</view>
						<view class="address-box">
							<view class="left">
								<!-- <image class="location1" src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/shop/location-icon.png" mode="widthFix">
                </image> -->
								<view class="district">{{v.map_punctuation || '商户暂无地理位置'}}</view>
							</view>
							<!-- <view class="goShopping">
                <text class="iconfont3">&#xe787;</text>
                <text class="text">去逛逛</text>
              </view> -->
						</view>
						<!-- <view class="location2-box">
              <image class="location2" src="https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/convenienceService/location2.png" mode="widthFix">
              </image>
              <view>{{v.map_punctuation}}&gt;</view>
            </view> -->
					</view>
				</view>
			</view>
		</view>
		<view>
			<noData v-if="listData.length<=0"></noData>
		</view>
		<!-- <u-loadmore :status="loadStatus" /> -->
		<!-- 选择地区 -->
		<u-select v-model="addressShow" mode="mutil-column-auto" :list="cityTree" @confirm="addressConfirm"
			confirmColor="#FF211F" cancelColor="#474747" :itemHeight="55">
		</u-select>

		<!-- <entrepreneurship-zone-tabbar :current="2"></entrepreneurship-zone-tabbar> -->
	</view>
</template>

<script>
	import rate from "@/components/rate.vue"
	import noData from "@/components/noData/nodata.vue"
	import {
		number
	} from "mathjs";
	export default {
		components: {
			rate,
			noData
		},
		data() {
			return {
				imgUrl: this.$mConfig.staticUrl,
				config: {
					back: false, //false是tolbar页面 是则不写
					title: '同城商家',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#000',

				},
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				sticky: uni.getSystemInfoSync().statusBarHeight + 60,
				// loadStatus: 'loadmore', //loading / nomore
				pageParams: {
					page: 1,
					limit: 10,
					city_code: 420100, //武汉市
				},
				listData: [],
				loading: false,
				cityName: '洪山区',
				addressShow: false,
				param: {
					union_business: true
				},
				cityTree: [],
				typeList: [],
				iconList: [],
				bannerList: [],
				current: 0
			}
		},
		 onLoad() {
			this.getCitys();
			this.getLoca();
			this.getTypeList()
			// this.getList();
		},
		onShow() {
			this.getCitys();
			this.getLoca();
			this.getTypeList()
		},
		onPullDownRefresh() {
			this.getList();
			this.getTypeList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		created() {
			this.getBanner()

		},
		methods: {
			addressShowFun() {
				uni.showLoading({
					title: '努力加载中...',
					mask: true
				});
				this.$http.get('/cnarea/tree-lbs').then(res => {
						if (res && res.code == 200) {
							this.cityTree = res.tree.children
							this.cityTree.forEach(v => {
								if (v.children.length <= 0) {
									v.children = [{}]
								}
							})
							if (this.cityTree) {
								this.addressShow = true
								uni.hideLoading();
							}
					}
				})
		},
		searchClick() {
			// console.log("dian");
			uni.navigateTo({
				url: "/pages/research/homepage/search",
			});
		},
		goShop(item = {}) {
			uni.navigateTo({
				url: '/pages/nearbyShop/list?id=' + (item.id || '') + '&cityName=' + this.cityName +
					'&address=' + (this
						.param.address || '') + '&area_code=' + (this.param.area_code || '')
			})
		},
		getBanner() {
			this.$http.get('/ad/ad/getByCode/localMerchant-banner')
				.then(res => {
					if (res.code == 200) {
						this.bannerList = res.list;
					}
				})
		},
		bannerClick(e) {
			let item = this.bannerList[e]
			this.$mUtil.imgLink(item.model_type, item.model_id, item.url, item.shop_id)
		},
		// 获取城市
		getCitys() {
			this.$http.get('/cnarea/tree-lbs').then(res => {
				if (res && res.code == 200) {
					this.cityTree = res.tree.children
					this.cityTree.forEach(v => {
						if (v.children.length <= 0) {
							v.children = [{}]
						}
					})
				}
			})
		},
		getLoca() {
			let that = this
			// #ifdef APP-PLUS
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: function(res) {
					that.cityName = res.address ? res.address.district : '';
					// that.param.address = res.address.province + res.address.city + res.address.district
					// that.param.lon = res.longitude;
					// that.param.lat = res.latitude;
					that.getList()
					if (!that.cityName) {
						uni.request({
							url: `https://restapi.amap.com/v3/geocode/regeo?key=47798318a0d39673a1fb9729aa6a468a&location=${res.longitude+','+res.latitude}`, //仅为示例，并非真实接口地址。
							method: "GET",
							header: {
								"content-type": "application/x-www-form-urlencoded"
							},
							success: (re) => {
								console.log(re);
								that.cityName = re.data.regeocode
									.addressComponent.city;
							}
						});
					}
				},
				complete(e) {
					console.log(e)
				}
			});
			// #endif

			// #ifdef H5
			this.getList()
			// #endif
		},
		// 获取便民服务分类列表
		getTypeList() {
			this.$http.get('/union/business/classify/list').then(res => {
				if (res && res.code == 200) {
					this.typeList = res.list
					let list = []
					let typePage = Math.ceil(res.list.length / 10)
					for (let i = 0; i < typePage; i++) {
						list[i] = this.typeList.splice(0, 10)
					}
					this.iconList = list
				}
			})
			
			this.$http.get('/service/goods/nearby', this.param).then(res => {
				uni.stopPullDownRefresh()
				if (res && res.code == 200) {
				this.typeList = res.list
				// let list = []
				// let typePage = Math.ceil(res.list.length / 10)
				// for (let i = 0; i < typePage; i++) {
				// 	list[i] = this.typeList.splice(0, 10)
				// }
				// this.iconList = list
			
				}
			})
			
			
			
		},
		swiperChange(e) {
			if (e) {
				this.current = e.detail.current
			}
		},
		// 选择地区
		addressConfirm(e) {
			// this.param.city_code = e[2].value ? e[2].value : e[1].value ? e[1].value : e[0].value;
			this.cityName = e[2].label ? e[2].label : e[1].label ? e[1].label : e[0].label;
			this.param.area_code = e[2].value ? e[2].value : e[1].value ? e[1].value : e[0].value;
			delete this.param.address
			// this.param.lon = e[1].data.longitude || e[0].data.longitude;
			// this.param.lat = e[1].data.latitude || e[0].data.latitude;
			console.log(e)
			this.getList()
		},
		// service/goods/nearby  /convenience/service/classify/list
		getList() {
			let that = this;

			uni.showLoading({
				title: '努力加载中...',
				mask: true
			});
			// this.loadStatus = 'loading';
			this.$http.get('/service/goods/nearby', that.param)
				.then(res => {
					if (res.code == 200) {
						that.listData = res.list;
						// that.loadStatus = that.listData.length > 0 ? 'loadmore' : 'nomore';
					}
				})
				.finally(() => {
					uni.hideLoading();
				})
		},
		// 跳转商品详情
		goDetails(v) {
			uni.navigateTo({
				url: "/pages/nearbyShop/shopDetail?shopId=" + v.shop_id
			})
		},
		search() {
			this.getList()
		},
	}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.containerSC {
		background: #fff;

		// /deep/ .hx-navbar__fixed {
		// 	top: 40rpx;
		// }

		// /deep/ .hx_font_size {
		// 	font-size: 44rpx;
		// 	font-weight: bold;
		// }

		.swiper {
			width: 673rpx;
			height: 308rpx !important;
			border-radius: 20rpx;
			overflow: hidden;
			margin: 0 auto;

			/deep/ .uni-swiper-dot {
				// width: 16rpx !important;
				// height: 6rpx;
				// border-radius: 4rpx !important;
				background-color: #FFD12D !important;
				// opacity: 0.5;
			}

			/deep/ .uni-swiper-dot-active {
				width: 40rpx !important;
				height: 16rpx;
				border-radius: 8rpx !important;
				background-color: #FFD12D !important;
				opacity: 1;
			}
		}

		.station {
			position: fixed;
			top: 0;
			width: 100%;
			height: 42rpx;
		}

		.search-top {
			// position: fixed;
			height: 85rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 19rpx;
			z-index: 3;
			margin-bottom: 20rpx;
			// margin-top: 81rpx;
			// margin-top: 11rpx;
			// background-color: #f5f5f5;

		}

		.city-text {
			margin-right: 12rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #666666;
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			view {
				max-width: 100rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;

				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 27rpx;

			}

			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 4rpx;
				vertical-align: middle;
			}
		}

		.searchBox {
			width: 100%;
			height: 62rpx;
			background: #F5F5F5;
			border-radius: 15rpx 15rpx 15rpx 15rpx;

			image {
				width: 35rpx;
				height: 35rpx;
			}

			/deep/ .u-content {
				padding-left: 27rpx;
				border-radius: 10rpx 0 0 10rpx !important;

				.u-input {
					margin-left: 22rpx;
				}
			}

			/deep/ .u-action-active {
				width: 106rpx;
				height: 70rpx;
				margin-left: 0;
				background: #FF721B;
				font-size: 30rpx;
				line-height: 70rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
			}

			.text {
				margin-right: 20rpx;
				margin-left: 0rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #fff;
			}

			input {
				box-sizing: border-box;
				display: inline-block;
				vertical-align: middle;
				width: 524rpx;
				height: 62rpx;
				line-height: 62rpx;
				// background: rgba(2,81,43,0.3);
				background: #F4F4F4;
				border-radius: 98rpx;
				padding-left: 80rpx;
				color: #474747;
				// background-image: url('https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/home/search-icon.png');

				background-size: 30rpx 30rpx;
				background-position: 25rpx 49%;
				background-repeat: no-repeat;
			}

			uni-input {
				padding-left: 36px;
			}

			text {
				margin-left: 10rpx;
				display: inline-block;
				vertical-align: middle;
				font-size: 42rpx;
				font-weight: 400;
				text-align: right;
				color: #ffffff;
				line-height: 42rpx;

				&.iconfont2 {
					font-size: 55rpx;
				}
			}
		}

		.input-placeholder {
			color: #474747;
			// opacity: 0.74;
			text-align: left;

			font-weight: 400;
			font-size: 23rpx;
			color: #BCBCBC;
			line-height: 38rpx;


		}

	}

	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		z-index: 9;
		background-color: #fff;

		.title {
			font-family: PingFang SC, PingFang SC-Regular;
			text-align: center;
			font-weight: 600;
			font-size: 27rpx;
			color: #333333;
			line-height: 27rpx;

		}

		.left {
			position: absolute;
			top: 50%;
			left: 30rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #1a1a1a;
			transform: translateY(-50%);

			.city-icon {
				width: 19rpx;
				height: 12rpx;
				margin-left: 5rpx;
			}
		}
	}

	.banner {
		width: 100%;
		height: 360rpx;
		margin-bottom: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.menu {
		display: flex;
		// justify-content: space-between;
		// align-items: center;
		flex-wrap: wrap;
		padding: 0 30rpx;
		margin-bottom: 22rpx;
		// background-color: #f7f7f7;
		// margin-top: 40px;

		.swiper {
			width: 100%;
			height: auto;
			transition: all .3s;

			/deep/ .uni-swiper-dots-horizontal {
				bottom: 0;

				.uni-swiper-dot-active {
					background-color: #FF721B;
				}
			}
		}

		.swiper-item {
			display: flex;
			flex-wrap: wrap;
		}

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 20%;
			margin-bottom: 30rpx;

			.img {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: 13rpx;
				// border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			text {
				width: 100%;
				// font-size: 26rpx;
				// font-family: PingFang SC, PingFang SC-Regular;
				// font-weight: 400;

				font-weight: 400;
				font-size: 21rpx;
				color: #333333;
				line-height: 23rpx;

				text-align: center;
				color: #1a1a1a;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		// .item:nth-child(5n) {
		//   margin-right: 0;
		// }
	}

	.con-box {
		padding: 0 19rpx;
		margin-top: 38rpx;

		.u-section {
			margin-bottom: 27rpx;

			/deep/ .uicon-arrow-right:before {
				color: #666;
			}
		}

		.items {
			.item {
				display: flex;
				align-items: center;
				margin-bottom: 19rpx;

				// height: 154rpx;
				.shop-img {
					width: 154rpx;
					height: 154rpx;
					margin-right: 19rpx;
					border-radius: 20rpx;
					overflow: hidden;
					flex-shrink: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					flex: 1;
					width: 0;
					padding: 19rpx 0;

					.score-box,
					.address-box,
					.location2-box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
					}

					.score-box {
						align-items: center;
						justify-content: flex-start;
						height: 27rpx;

					}

					.location1,
					.location2 {
						width: 20rpx;
						height: 27rpx;
						flex-shrink: 0;
						margin-right: 9rpx;
					}

					.light-start,
					.startt {
						width: 30rpx;
						height: 30rpx;
						margin-right: 12rpx;
					}

					.title {
						font-size: 31rpx;
						color: #474747;
						margin-bottom: 19rpx;
						font-weight: bold;
					}

					.score-box {
						display: flex;
						align-items: normal;
						margin-bottom: 26rpx;
						color: #AAAAAA;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;


						.score {
							flex-shrink: 0;
						}

						.score-text {
							font-size: 24rpx;
							font-weight: 500;
							text-align: left;
							color: #AAAAAA;
							flex-shrink: 0;
							line-height: 24rpx;
							margin-left: 8rpx;
						}

						.ju {
							margin-left: 23rpx;
							font-size: 24rpx;
							color: #AAAAAA;
							text-align: left;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.address-box {
						color: #666666;
						justify-content: space-between;

						.left {
							flex: 1;
							width: 0;
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: left;
							color: #333333;
						}

						.goShopping {
							display: flex;
							align-items: center;
							font-size: 40rpx;
							color: #FF721B;
							flex-shrink: 0;

							.text {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #AAAAAA;
							}
						}

						.district {
							color: #AAAAAA;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden; //溢出内容隐藏
							text-overflow: ellipsis; //文本溢出部分用省略号表示
							display: -webkit-box; //特别显示模式
							-webkit-line-clamp: 2; //行数
							line-clamp: 2;
							-webkit-box-orient: vertical; //盒子中内容竖直排列
							height: 27rpx;
							line-height: 27rpx;
							// margin-right: 40rpx;
							//          text-overflow: ellipsis;
							//          white-space: nowrap;
							// line-clamp: 2;
							// -webkit-line-clamp: 2;
							// overflow: hidden;
						}

					}

					.location2-box {
						color: #333333;

						view {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}

	// /deep/ .hx-navbar__content__main_center {
	// 	background-color: #fff !important;
	// 	border: 1rpx solid #fff !important;

	// }

	// /deep/.hx_text_overflow {
	// 	font-weight: 600 !important;
	// 	font-size: 65rpx !important;
	// 	color: #333333 !important;
	// 	line-height: 81rpx !important;
	// 	margin-bottom: 23rpx;
	// }
	.titleView {
		font-weight: 600;
		font-size: 65rpx;
		color: #333333;
		line-height: 88rpx;
		padding-top: 11rpx;
		padding-left: 19rpx;
		padding-right: 19rpx;
		height: 104rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		margin-bottom: 31rpx;


	}
</style>